<template>
  <div class="myFeedBack">
    <c-back  :tab="tab" :rightFun="goSave"></c-back>
    <div class="feedBack mt20">
      <div class="feed-text" :class='{col5 : textArea !== defaultVal}'>
        <textarea maxlength="200" class="limitFeed" @focus='textFocus()' @blur='textBlur()' v-model.tirm='textArea'></textarea>
      </div>
    </div>
  </div>
</template>
<script>
  import CBack from '../../../components/BackFun.vue'
  export default {
    components :{
      CBack
    },
    data() {
      return {
        defaultVal: '感谢您对金筑云的关注，您的意见和建议能帮助我们做的更好！',
        textArea: '',   // 绑定textarea
        textNum: 200,    // 字数限制
        tab: {
          title: '意见反馈',
          rightText: '提交',
        }
      }
    },
    methods: {
      textFocus: function () {    // 意见反馈--获取焦点时
        if (this.textArea === this.defaultVal) this.textArea = '';
        this.isDefault = false
      },
      textBlur: function () {     // 意见反馈--离开焦点时
        if (this.textArea === '') {
          this.isDefault = true;
          this.textArea = this.defaultVal
        }
      },
      goSave() {
        this.$router.push({path: "/about"});
        //点击提交时进行两层判断
        // if (this.textArea === this.defaultVal || this.textArea.length < 5) {
        //   // this.$dialog('字数不能小于5')
        // } else {
        //   // this.$dialog(['提交成功', 'true']);
        //   // 正常是ajax提交内容--...此处省略
        //   setTimeout(() => {
        //     this.$router.push('/user');
        //   }, 1800)
        // }
      }
    },
    mounted() {
      this.textArea = this.defaultVal
    }
  }
</script>
<style lang="scss">
  @import '../../../assets/style/common';
  .myFeedBack{
    padding-top: 80px;
  }
  .feedBack {
    width: 93.6%;
    margin-left:auto;
    margin-right: auto;
    //***通用***文 本输入框
    .feed-text {
      background: #fff;
      @include box(padding,20,20,15);
      @include point(font-size,14);
      color: #999;
      textarea {
        color: #999;
        width: 100%;
        padding: 0;
        @include point(font-size,18);
        line-height: 1.3em;
        min-height: 11.7em;
        overflow-y:hidden;
        resize:none;
      }
    }
    .col5 textarea { color: #555;}
  }
</style>
